<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.chilli.cosima.action.I18nAction" %>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
	<head>
		<base href="<%=basePath%>" />
		<title>Insert title here</title>
		<link href="css/validate.css" rel="stylesheet" type="text/css" />
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
		<script src="js/common.js" type="text/javascript"></script>
		<script src="js/validator.js" type="text/javascript"></script>

	</head>
	<body>
		<div id="man_zone">
		<s:form name="form" id="form" action="user/userAddAction.action" theme="simple">
		<div class="navbar">
			<s:text name="user.title.usermanage" /> > <s:text name="user.title.accountmanage" /> > <s:text name="user.title.createaccount" />
		</div>		
		<div class="toolbar">
			<input type="submit" value="<s:text name="user.button.save" />" class="button_60" onMouseOver="this.className='button_60_over'" onMouseOut="this.className='button_60'"/>
			<input type="button" value="<s:text name="user.button.return" />" onclick="javascript:history.back(-1)" class="button_60" onMouseOver="this.className='button_60_over'" onMouseOut="this.className='button_60'"/>
				
		</div>
		
		<div class="main_content" >
		<table width="99%" border="0" align="center" cellpadding="3" 
				cellspacing="1" align="center">

			<tr>
				<td width="15%" class="left_title_1">
					<s:text name="user.username" /><s:text name="user.colon" />
				</td>
				<td width="85%">
					&nbsp;&nbsp;&nbsp;
					<s:textfield name="user.loginname" require="true" datatype="limit|ajax" url="user/userAddAction!checkUser.action" min="1"
					max="50" msg='<%=I18nAction.getInstance().getResource("user.length", new String[]{"1", "50"}) %>'  /><span style="color:red">*</span>
				</td>
			</tr>
			<tr>
				<td class="left_title_2">
					<s:text name="user.password" /><s:text name="user.colon" />
				</td>
				<td>
					&nbsp;&nbsp;&nbsp;
					<s:password  name="user.loginpwd"  id="password" require="true" datatype="limit" min="1"
					max="50" msg='<%=I18nAction.getInstance().getResource("user.length", new String[]{"1", "50"}) %>' /><span style="color:red">*</span>
				</td>
			</tr>
			
			<tr hieght="100" >
		      <td class="left_title_1">
		      	<s:text name="user.password.strength" /><s:text name="user.colon" />
		      </td>
		      <td>&nbsp;&nbsp;&nbsp;
		        <div id="pw_check_1" class="pw_check" style="display:none;"><span><strong class="c_orange"><s:text name="user.password.weak" /></strong></span><span><s:text name="user.password.medium" /></span><span><s:text name="user.password.strong" /></span></div>
		        <div id="pw_check_2" class="pw_check" style="display:none;"><span><s:text name="user.password.weak" /></span><span><strong class="c_orange"><s:text name="user.password.medium" /></strong></span><span><s:text name="user.password.strong" /></span></div>
		        <div id="pw_check_3" class="pw_check" style="display:none;"><span><s:text name="user.password.weak" /></span><span><s:text name="user.password.medium" /></span><span><strong class="c_orange"><s:text name="user.password.strong" /></strong></span></div>
		      </td>
		   	</tr>			
		   	
	        <tr>
	          <td class="left_title_2">
	          	<s:text name="user.password.confirm" /><s:text name="user.colon" />
	          </td>
	          <td>&nbsp;&nbsp;&nbsp;
	          	<s:password name="pwdconfirm" require="true" datatype="limit|repeat" 
	          	   to="user.loginpwd" msg='<%=I18nAction.getInstance().getResource("user.password.different") %>' id="pwdconfirm"  maxlength="50" min="1"
					max="50"/><span style="color:red">*</span>
	          </td>
	        </tr>			   	
			   				
			<tr>
				<td class="left_title_1">
					<s:text name="user.realname" /><s:text name="user.colon" />
				</td>
				<td>
					&nbsp;&nbsp;&nbsp;
						 <s:textfield name="user.username" require="true" datatype="limit" min="1"
					max="50" msg='<%=I18nAction.getInstance().getResource("user.length", new String[]{"1", "50"}) %>' /><span style="color:red">*</span>
				</td>
			</tr>
			
			<tr>
				<td class="left_title_2">
					<s:text name="user.role" /><s:text name="user.colon" />
				</td>
				<td>
					&nbsp;&nbsp;&nbsp;
						 <s:select name="user.roleid" list="roles" listKey="id" listValue="rolename" headerKey="" headerValue="%{getText('user.select')}" require="true" datatype="limit" min="1"
					max="50" msg='<%=I18nAction.getInstance().getResource("user.role.select") %>' /><span style="color:red">*</span>
				</td>
			</tr>			
			
			<tr>
				<td class="left_title_1">
					<s:text name="user.email" /><s:text name="user.colon" />
				</td>
				<td>
					&nbsp;&nbsp;&nbsp;
						 <s:textfield name="user.email" require="false" datatype="limit|email" min="3"
					max="50" msg='<%=I18nAction.getInstance().getResource("user.email.wrong") %>' />
				</td>
			</tr>

			<tr>
				<td class="left_title_2">
					<s:text name="user.mobile" /><s:text name="user.colon" />
				</td>
				<td>
					&nbsp;&nbsp;&nbsp;
						 <s:textfield name="user.phone" require="false" datatype="limit|mobile" min="11"
					max="11" msg='<%=I18nAction.getInstance().getResource("user.mobile.wrong") %>'/>
				</td>
			</tr>

	</table>
	</div>
	</s:form>
	</div>
	</body>
	<script language="javascript">
		$().ready(function() {
			$('form').checkForm(1);
		});

		$('#password').blur(function(){
			ShowStrong();
		 });
		 
		function CharMode(iN)
		{
			if (iN>=65 && iN <= 90)
				return 2;
			if (iN>=97 && iN <= 122)
				return 4;
			else
				return 1;
		}

		function bitTotal(num)
		{
			modes = 0;
			for(i=0; i<3; i++)
			{
				if (num & 1) modes++;
				num >>>= 1;
			}
			return modes;
		}

		function checkStrong(sPW)
		{
			Modes=0;
	
			for (i=0;i<sPW.length;i++)
			{
				//测试每一个字符的类别并统计一共有多少种模式.
				Modes|=CharMode(sPW.charCodeAt(i));
			}
			
			var btotal = bitTotal(Modes);
			if (sPW.length >= 10) btotal++;

			switch(btotal) 
			{
				case 1:
					return "pw_check_1";
					break;
				case 2:
					return "pw_check_2";
					break;
				case 3:
					return "pw_check_3";
					break;
				default:
					return "pw_check_1";
			}
		}

		function ShowStrong()
		{
			var data = checkStrong($('#password').val());
			pw_id = '#' + data;
			$(".pw_check").hide();
			$(pw_id).show();
		}
		
	</script>
</html>